<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>完善资料</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" type="text/css" href="{MODULE_URL}template/static/css/aui.css"/>
    <link rel="stylesheet" href="{MODULE_URL}template/static/css/weui.css"/>
    <link rel="stylesheet" href="{MODULE_URL}template/static/css/weuix.css"/>
    <script src="{MODULE_URL}template/static/script/zepto.min.js"></script>
    <script src="{MODULE_URL}template/static/script/zepto.weui.js"></script>
    <script src="{MODULE_URL}template/static/script/lrz.min.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/static/script/aui-dialog.js" ></script>
    <script type="text/javascript" src="{MODULE_URL}template/static/js/vconsole.min.js" ></script>
    <script src="{MODULE_URL}template/mobile/js/vue.js"></script>
    <!--<script src="{MODULE_URL}template/mobile/js/jquery1.11.1.js"></script>-->
    <style>
        .set-head {
            position: relative;
            top: .7em;
        }
        .set-head-icon {
            width: 2em;
            border-radius: 50%;
        }
        .dn {
            display: none;
        }
    </style>
</head>

<body >
    <div id="fromApp">
        <form action="" method="post" enctype="multipart/form-data">
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-form-list">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                姓名
                            </div>
                            <div class="aui-list-item-input">
                                <input name="name" v-model="name" type="text" placeholder=""/>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                电话
                            </div>
                            <div class="aui-list-item-input">
                                <input name="phone" v-model="phone" type="text" placeholder=""/>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                微信号
                            </div>
                            <div class="aui-list-item-input">
                                <input name="wechat" v-model="wechat" type="text" placeholder=""/>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                邮箱
                            </div>
                            <div class="aui-list-item-input">
                                <input name="email" v-model="email" type="text" placeholder=""/>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                公司名称
                            </div>
                            <div class="aui-list-item-input">
                                <input name="coName" v-model="coName" type="text" placeholder=""/>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                公司地址
                            </div>
                            <div class="aui-list-item-input">
                                <input name="coAdd" v-model="coAdd" type="text" placeholder=""/>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                职位
                            </div>
                            <div class="aui-list-item-input">
                                <input name="job" v-model="job" type="text" placeholder=""/>
                            </div>
                        </div>
                    </li>

                    <!--散-->
                    <div class="weui-uploader__hd aui-list-item">
                        <p class="weui-uploader__title">小头像</p>
                    </div>
                    <div class="weui-uploader__bd " style="margin: 10px 0 0 10px;">
                        <ul class="weui-uploader__files" id="uploaderFiles">

                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file">
                        </div>
                    </div>

                    <div class="weui-uploader__hd aui-list-item">
                        <p class="weui-uploader__title">大头像</p>
                    </div>
                    <div class="weui-uploader__bd " style="margin: 10px 0 0 10px;">
                        <ul class="weui-uploader__files" id="bigImgFile">

                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="bigImgInput" class="weui-uploader__input" v-on:click="fileClick(1)" accept="image/*" multiple="" type="file">
                        </div>
                    </div>

                    <div class="weui-uploader__hd aui-list-item">
                        <p class="weui-uploader__title">微信名片</p>
                    </div>
                    <div class="weui-uploader__bd " style="margin: 10px 0 0 10px;">
                        <ul class="weui-uploader__files" id="wechatCardFile">

                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="wechatCardInput" class="weui-uploader__input" v-on:click="fileClick(2)" accept="image/*" multiple="" type="file">
                        </div>
                    </div>

                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">单图压缩上传,使用lrz压缩</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files">
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input class="weui-uploader__input" accept="image/*" multiple="" type="file" v-on:click="uploadimg(this)">
                            </div>
                        </div>

                    </div>





                    <div class="weui-gallery" style="display: none">
                        <span class="weui-gallery__img"></span>
                        <div class="weui-gallery__opr">
                        </div>
                    </div>
                    <!--e-->



                    <div class="weui_dialog_alert" style="display: none;">
                        <div class="weui_mask"></div>
                        <div class="weui_dialog">
                            <div class="weui_dialog_hd"> <strong class="weui_dialog_title">警告</strong>
                            </div>
                            <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
                            <div class="weui_dialog_ft">
                                <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
                            </div>
                        </div>
                    </div>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
                            <div class="aui-btn aui-btn-info aui-btn-block" tapmode onclick="set()">提交</div>
                        </div>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <script type="text/javascript" charset="utf-8">

        // $(function() {// 初始化内容
        //     vm.init();
        // });

        var vm = new Vue({
            el: '#fromApp',
            data: {
                name: '',
                phone: '',
                wechat: '',
                email: '',
                coName: '',
                coAdd: '',
                job: '',
                uploaderFiles: '',
                bigImgFile: '',
                wechatCardFile: ''
            },
            methods: {
                init: function () {
                    // 初始化
                },
                fileSet: function () {
                    // 文件上传

                },
                fileClick: function (index,e) {
                    // 上传文件事件
                    var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                    for (var i = 0, len = files.length; i < len; ++i) {
                        var file = files[i];

                        if (url) {
                            src = url.createObjectURL(file);
                        } else {
                            src = e.target.result;
                        }

                        var formData = new FormData();
                        formData.append("image", file);
                        // 到了
                        $.ajax({
                            url: "{php echo $this->createMobileUrl('setImage');}",
                            type: "POST",
                            data: formData,
                            contentType: false,
                            processData: false,
                            async:false,
                            success: function (r) {
                                alert(JSON.parse(r).url)
                            },
                            error: function () {
                                alert("上传失败！");
                            }
                        });

                    }
                },
                removeimg: function (obj) {
                    // 移除图片
                    $.confirm('您确定要删除吗?', '确认删除?', function() {
                        $(obj).remove();
                    });
                    return false;
                },
                uploadimg: function (obj) {
                    lrz(obj.files[0],{width:750,fieldName:"file"}).then(function(data) {
                        alert(data.base64)
                        $.post("{php echo $this->createMobileUrl('setImageBase');}",{image: data.base64},function(rs){

                            $(obj).parent().prev().html('<li v-on:click="removeimg(this)" class="weui-uploader__file" style="background-image:url('+rs.url+')"><input value="'+rs.url+'"  type="hidden"  name="file" /></li>');
                        },'json');

                    }).then(function(data) {

                    }).catch(function(err) {
                        console.log(err);
                    });
                }
            }
        });

        //初始化调用
        vm.init();


        $(function(){
            var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)" v-on:click="removeimg(this)"></li>';
            var $uploaderInput = $("#uploaderInput"); //上传按钮+
            var $uploaderFiles = $("#uploaderFiles");    //图片列表
            var $galleryImg = $(".weui-gallery__img");//相册图片地址
            var $gallery = $(".weui-gallery");
            $uploaderInput.on("change", function(e){
                vm.fileClick(1,e); // 调用上传文件方法
                $uploaderFiles.append($(tmpl.replace('#url#', src)));
            });
            $uploaderFiles.on("click", "li", function(){
                $galleryImg.attr("style", this.getAttribute("style"));
                console.log(this);
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function(){
                $gallery.fadeOut(100);
            });

        });


        //打印对象参数
        function writeObj(obj){
            var description = "";
            for(var i in obj){
                var property=obj[i];
                description+=i+" = "+property+"\n";
            }
            alert(description);
        }
        // 提交数据
        var dialog = new auiDialog({})
        function set() {
            // 获取用户名
            var title = $("input[name='title']").val();
            if (title == '') {
                dialog.alert({
                    title: "消息提示",
                    msg: '工单标题不能为空',
                    buttons: ['取消', '确定']
                }, function (ret) {
                    console.log(ret)
                })
                return;
            }
            var content = $("#content").val();
            if (content == '') {
                dialog.alert({
                    title: "消息提示",
                    msg: '工单内容不能为空',
                    buttons: ['取消', '确定']
                }, function (ret) {
                    console.log(ret)
                })
                return;
            }
            var username='';
            var phone='';

            // 添加内容结束
            var parms;
            if( uniacid == 2 ){
                parms = {
                    title: title,
                    content: content,
                    urlll: urlll,
                }
            }

            // 发送短信
            $.ajax({
                url: "{php echo $this->createMobileUrl('addNewTwo');}",
                // data: {title: title, content: content, urlll: urlll},
                data: parms,
                type: 'POST',
                async: false,
                dataType: 'JSON',
                success: function (data) {
                    var r = JSON.parse(data);
                    if (r.code === 0) {
                        // 已经存在
                        dialog.alert({
                            title: "消息提示",
                            msg: '工单提交成功',
                            buttons: ['取消', '确定']
                        }, function (ret) {
                            if (ret) {
                                location.href = "{php echo $this->createMobileUrl('goOrderList',array())}";
                            }
                        })
                        return;
                    } else {
                        dialog.alert({
                            title: "消息提示",
                            msg: '工单提交失败',
                            // msg:r.msg,
                            buttons: ['取消', '确定']
                        }, function (ret) {
                            console.log(ret)
                        })
                        return;
                    }
                },
                error: function () {
                    dialog.alert({
                        title: "消息提示",
                        msg: '系统繁忙，请稍后再试',
                        buttons: ['取消', '确定']
                    }, function (ret) {
                        console.log(ret)
                    })
                    return;
                }
            })
        }
    </script>

</body>
</html>